* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.roll-wrap:hover .control {
    display: block;
}

.roll-wrap {
    position: relative;
    width: 1260px;
    height: 300px;
}

.roll_row .roll__list::before,
.roll_row .roll__list::after {
    content: "";
    display: table;
    line-height: 0;
}

.roll_row .roll__list::after {
    clear: both;
}

.roll_row .roll__list {
    /* width: 1880px !important; */
    height: 300px;
    white-space: nowrap;
}


.roll_row .roll__list li {
    /* float: left; */
    font-weight: bold;
    font-size: 30px;
    color: #fff;
}

.control {
    position: absolute;
    display: none;
    padding: 10px 5px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}
.control.pre {
    left: 10px;
    width: 72px;
    height: 44px;
    line-height: 24px;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    background-color: #f7f8fa;
    text-align: center;
    cursor: pointer;
    top:260px;
    color:#666 !important;
}

.control.next {
    right: 12px;
       width: 72px;
    height: 44px;
    line-height: 24px !important;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    background-color: #f7f8fa;
    text-align: center;
    cursor: pointer;
    top:260px;
    color:#666 !important;
}

.roll_col {
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.page-focus .content .hover-df{padding:0;}
.page-focus .content .hover-ht {display: block;opacity: 1;transition: all .5s ease-in-out;height: auto !important;padding:0;position:relative;top: 0;}
.page-focus .content .hover-ht .roll_row .roll__list ul {padding-top:0;}
.page-focus .content .hover-ht .roll_row .roll__list li {display:inline-block;/* margin: 13px; */width: 230px;text-align:center;background: none;}
.page-focus .content .hover-ht .roll_row .roll__list li .v-image{margin:20px auto 0;height: 200px;width: 200px;}
.page-focus .content .hover-ht .roll_row .roll__list{width: 100%;white-space: unset;display: flex;justify-content: flex-start;flex-wrap: wrap;height: auto;padding-bottom: 30px;min-height: 200px;}
.page-focus .content .hover-ht .control {display: block;}
.page-focus .content .hover-ht .roll-wrap {width: 1180px;height: auto;margin: 0 auto;}
.page-focus .content .hover-ht .roll_row .roll__list li span{padding:0;/* text-overflow:ellipsis; */font-size: 13px;white-space: pre-wrap;line-height: 20px;}
 .vp-head-series:hover .hover-ht {
                  display: block;
                  opacity: 1;
                  transition: all .5s ease-in-out;
                  height:400px;
                  padding: 20px;
                  
                }


                .hover-ht {
                  width: 100%;
                  background: #fff;
                  position: absolute;
                  top: 98px;
                  height:0;
                  overflow:hidden;
                  left: 0;
                  border-radius:0 0 30px 30px;
                }

                .hover-df {
                  width: 1248px;
                  overflow: hidden;
                  overflow-x: scroll;
                  margin: 0 auto;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  padding-top: 40px;
                  padding-bottom: 20px;
                }

                ::-webkit-scrollbar {
                  display: none;
                }


                .vp-head-series:hover .hover-ht>div {
                  -webkit-transform: translateY(20px) 0.5s ease-in;
                  -moz-transform: translateY(20px) 0.5s ease-in;
                  -ms-transform: translateY(20px) 0.5s ease-in;
                  -o-transform: translateY(20px) 0.5s ease-in;
                  transform: translateY(20px) 0.5s ease-in;
                }

                .hover-ht .ht {
                  background: #f7f8fa;
                  border-radius: 10px;
                  /* margin: 10px; */
                  padding: 0 20px 20px 20px;
                  -webkit-transform: translateY(0px);
                  -moz-transform: translateY(0px);
                  -ms-transform: translateY(0px);
                  -o-transform: translateY(0px);
                  transform: translateY(0px);
                }

                .hover-ht .ht .v-image__image--cover {
                  background-size: 100%;
                }

                .hover-ht .v-image {
                  width: 150px;
                  height: 140px;
                  margin-top: 20px;
                }

                .hover-ht .ht .series-list-title {
                  height: 40px;
                  line-height: 40px;
                  font-size: 14px;
                  font-weight: 400;
                }

                .hover-ht .ht .series-list-title span {
                  height: 40px;
                  line-height: 40px;
                  width: 150px;
                  color: #111;
                  /* overflow: hidden; */
                  /* white-space: nowrap; */
                  }

                .hover-ht .but-h {
                    position:absolute;
                    top: 230px;
                    display: inline;
                    width: 230px;
                    left:500px;
                    padding: 0 60px;
                    line-height: 44px;
                    border-radius: 50px;
                    background-color: #f7f8fa;
                    font-size: 12px !important;
                    color: #111 !important;
                    margin: 30px auto 40px;
                    display: flex;
                    align-items: center;
                }

                .hover-ht .but-h img {
                  width: 16px;
                  height: 16px;
                  margin-right: 10px;
                  float: left;
                  position: relative;
                  top: 13px;
                }

                .but-h:hover {
                  color: #22ac67 !important;
                         font-size: 12px !important;
                }

                .but-h:hover .img1 {
                  display: none !important;
                }

                .but-h:hover .img2 {
                  display: block !important;
                  float: left;
                }

section {
    /* border-bottom: 1px solid */
}
.carousel {
    margin: 0px auto;
    overflow: hidden;
    position: relative;
    width: 240px
}
@media (min-width: 480px) {
    .carousel {
        width: 360px
    }
}
@media (min-width: 768px) {
    .carousel {
        width: 1200px
    }
}

.carousel:before, .carousel:after {
    content: "";
    display: table
}

.carousel:after {
    clear: both
}

.slide {
    background: #F44336;
    border: 10px solid #fff;
    color: #fff;
    float: left;
    font-size: 20px;
    /* height: 200px; */
    line-height: 5;
    text-align: center;
    width: 200px;
}

.pure-js-carousel-btn {
    position: relative;
}

.pure-js-carousel-btn-next {
    right: 10px;
    position: absolute;
    width: 72px;
    height: 44px;
    line-height: 24px;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    background: url(../images/nr.png) no-repeat;
    background-size: 100%;
    text-align: center;
    cursor: pointer;
    top: 260px;
    color: #666 !important;
    display: block;
    font-size: 16px;
    z-index: 99999;
}

.pure-js-carousel-btn-prev {
    left: 10px;
    position: absolute;
    width: 72px;
    height: 44px;
    line-height: 24px;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    background: url(../images/nl.png) no-repeat;
    background-size: 100%;
    text-align: center;
    cursor: pointer;
    top: 260px;
    color: #666 !important;
    display: block;
    font-size: 16px;
    z-index: 99999;
}

.pure-js-carousel-dots {
    float: left;
    margin-top: 15px;
    text-align: center;
    width: 100%
}

.pure-js-carousel-dot {
    display: inline-block;
    margin: 0 5px
}

.pure-js-carousel-dot-btn {
    background: green;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    display: none;
}
.active .pure-js-carousel-dot-btn {
    background: blue
}